<template>
  <view :class="[ns.b(), ns.b(typeClass), ns.m(codeName), sysCssName]" :style="inlineStyle">
    <!-- TODO 绘制布局面板 -->
    <!-- 绘制默认插槽 -->
    <slot></slot>
  </view>
</template>
<script setup lang="ts">
import { useNamespace } from '@/use'
import { ControlController, IViewLayoutPanelController } from '@ibiz-template/runtime'
import { IControlContainer } from '@ibiz/model-core'
import { isNil } from 'ramda'
import { CSSProperties, reactive } from 'vue'

const props = defineProps({
  controller: {
    type: Object as PropType<ControlController>,
    required: true,
  },
})

const ns = useNamespace('control')
const { controlType, sysCss, codeName } = props.controller.model
const typeClass = controlType!.toLowerCase()
const sysCssName = sysCss?.cssName
const model = props.controller.model

/** 子部件模型 */
const controls = (props.controller.model as IControlContainer).controls

const onLayoutPanelCreated = (controller: IViewLayoutPanelController): void => {
  props.controller.setLayoutPanel(controller as IViewLayoutPanelController)
}

const inlineStyle = reactive<CSSProperties>({})
// 非导航栏时才输出宽高
if (model.controlType!.endsWith('EXPBAR') === false) {
  if (!isNil(model.width)) {
    if (model.width > 0 && model.width <= 1) {
      inlineStyle.width = `${model.width * 100}%`
    } else {
      inlineStyle.width = `${model.width}px`
    }
  }
  if (!isNil(model.height)) {
    if (model.height > 0 && model.height <= 1) {
      inlineStyle.width = `${model.height * 100}%`
    } else {
      inlineStyle.height = `${model.height}px`
    }
  }
}
</script>
<style lang="scss">
@include b(control) {
  width: 100%;
  height: 100%;
}
</style>
